<template>
  <div @click="ToDetail">
    <el-descriptions
      border
      :column="3"
      size="large"
      align="center"
      style="margin-bottom: 1.5rem"
    >
      <el-descriptions-item label="项目名称">上海音乐厅</el-descriptions-item>
      <el-descriptions-item label="损伤数据"> 共73条</el-descriptions-item>
      <el-descriptions-item label="最近更新时间"
        >2021-11-1</el-descriptions-item
      >
      <el-descriptions-item
        label="严重"
        label-class-name="red"
        >20条</el-descriptions-item
      >
      <el-descriptions-item
        label="中等"
        label-class-name="orange"
        >30条</el-descriptions-item
      >
      <el-descriptions-item
        label="轻微"
        label-class-name="green"
        >3条</el-descriptions-item
      >
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
const ToDetail = () => {
  navigateTo("/project/details-10/");
};
</script>

<style lang="scss" scoped>
:deep(.red) {
  background-color: rgb(253, 225.6, 225.6) !important;
}

:deep(.orange) {
  background-color: rgb(250, 236.4, 216) !important;
}

:deep(.green) {
  background-color: rgb(224.6, 242.8, 215.6) !important;
}
</style>
